<form class="form-horizontal" id="formSelectedSearchVideo" method="post">
    <div class="form-group col-md-12 col-sm-3 col-md-offset-3">
        <div class="col-md-10 padding-left-none">
            <div class="form-group col-md-12">
                <div class="col-md-1">
                    <button type="button" class="btn btn-white btn-default btn-bold btn-sm btnRemoveSelectedVideo" data-loading-text="<i class='ace-icon fa fa-spinner fa-spin blue bigger-125'></i>">
                        <i class="ace-icon fa fa-trash-o"></i>
                    </button>
                </div>
                <div class="col-md-11">
                    <div class="input-group">
                        <input type="text" class="form-control input-sm" placeholder="Nhập tên video để tìm">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-white btn-default btn-bold btn-sm">
                            Tìm
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                        </button>
                    </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <a href="{{ url(config.application.backendUrl ~ '/ajax/loadVideo/' ~ videoGroup.getId() ) }}" class="btn btn-white btn-default btn-bold btn-sm btnAddVideo" data-toggle="modal" data-target="#modalAddVideoToVideo">
                <i class="ace-icon glyphicon glyphicon-plus"></i>Thêm video
            </a>
        </div>
    </div>
</form>

<form action="{{ url(config.application.backendUrl ~ '/video/group/edit/' ~ videoGroup.getId() ~ '?tab=video' ) }}" class="form-horizontal" id="formSelectedRemoveVideo" method="post">
    <div class="form-group col-md-12 col-sm-3 col-md-offset-3">
        <div class="col-md-12">
            <table class="table">
                <thead>
                <tr>
                    <td>
                        <label class="position-relative">
                            <input type="checkbox" class="ace removeSelectedVideoAll" name="removeSelectedVideoAll" ng-click="checkRemoveSelectedVideoAll()">
                            <span class="lbl"></span>
                        </label>
                    </td>
                    <td>Hình ảnh</td>
                    <td>Tên video</td>
                    <td>Quốc gia</td>
                    <td>Thể loại</td>
                </tr>
                </thead>
                <tbody id="listSelectedVideo">
                {% if(videoGroupLinks) %}
                    {% for videoGroupLink in videoGroupLinks %}
                        {% if(videoGroupLink.video) %}
                        <tr id="selectedVideoGroupToVideo{{ videoGroupLink.video.getId() }}">
                            <td>
                                <label class="position-relative">
                                    <input type="checkbox" class="ace selectedVideoRemove" name="selectedVideoRemove[]" value="{{ videoGroupLink.video.getId()}}">
                                    <span class="lbl"></span>
                                </label>
                            </td>
                            <td>
                                {% if(videoGroupLink.video.imageLink.getFirst()) %}
                                    {{ image( constant.pathUploadImage ~ videoGroupLink.video.imageLink.getFirst().images.getImagePath() , 'width' : '250') }}
                                {% endif %} <br />
                            </td>
                            <td>{{ videoGroupLink.video.videoDescription.getName() }}</td>
                            <td>
                                {{ videoGroupLink.video.national ? videoGroupLink.video.national.getName() : '' }}
                            </td>
                            <td>
                                {% if(videoGroupLink.video.videoCategoryLink) %}
                                    {{ videoGroupLink.video.videoCategoryLink.getFirst().category.getName() }}
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</form>

<div class="clearfix"></div>

<!-- Modal -->
<div class="modal fade" id="modalAddVideoToVideo" tabindex="-1" role="dialog" aria-labelledby="modalAddVideoToVideo" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->